<template>
  <div class="upgrade">
    <p class="mb-2">授权二维码</p>
    <el-image class="qrcode-img mb-4" :src="imgQrcode"></el-image>
    <el-form label-width="160px">
      <el-form-item label="机器码：">
        <el-input class="sn" v-model="sn" disabled />
        <el-button @click.stop="copySn" class="ml-2.5">复制机器码</el-button>
      </el-form-item>
      <h4 class="font-bold text-base mb-4">License升级</h4>
      <el-form-item label="允许接入卫士数量：">
        {{licenseInfo && licenseInfo.guardNumber}}
      </el-form-item>
      <el-form-item label="剩余使用天数：">
        {{licenseInfo && licenseInfo.availableDays || ''}}
      </el-form-item>
      <el-form-item label="导入license：">
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          method="POST"
          :on-change="onSuccess"
          :show-file-list="false"
          :limit="1"
          :auto-upload="false"
          :on-exceed="handleExceed"
        >
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
          </template>
          <template #tip>
            <div class="text-red-500 text-xs mt-1.5">
              {{ uploadTip }}
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <!-- <br />
    机器码：<el-input class="sn" v-model="sn" disabled />
    <el-button @click.stop="copySn" class="ml-2.5">复制机器码</el-button>
    
    <template v-if="load">
      <span class="mb-4 inline-block"
        >允许接入卫士数量：{{ licenseInfo.guardNumber }}</span
      >
      <br />
      <span class="mb-4 inline-block">剩余使用天数：{{ licenseInfo.availableDays }}</span>
    </template> -->
    
  </div>
</template>

<script setup>
import { ref, onMounted, toRaw, toRef } from "vue";
import { genFileId } from "element-plus";
import {
  req_getLicenseInfo,
  req_getMachineInfo,
  req_uploadLicenseFile,
} from "~/utils/axios/setting.js";
import { ElMessage, ElMessageBox } from "element-plus";
const thatPath = window.location.href.split("#")[0];
let imgQrcode = ref(null);
let sn = ref(null);
let licenseInfo = ref(null);
let load = ref(false);
const uploadRef = ref();
const uploadTip = ref();
// const copySn = () => {
//     navigator.clipboard.writeText(sn.value)
//     console.log(sn.value)
// }
const copySn = () => {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(sn.value);
  } else {
    const textArea = document.createElement("textarea");
    textArea.value = sn.value;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("copy");
    document.body.removeChild(textArea);
  }
  ElMessage.success("已复制");
};
const setUpgradeInfo = async () => {
  let getMachineInfo = await req_getMachineInfo();
  let getLicenseInfo = await req_getLicenseInfo();
  imgQrcode.value = `data:image/png;base64,${getMachineInfo.data.qrcode}`;
  sn.value = getMachineInfo.data.sn;
  licenseInfo.value = getLicenseInfo.data;
  load.value = true;
};
onMounted(() => {
  setUpgradeInfo();
});
const handleExceed = (files) => {
  uploadRef.value.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  uploadRef.value.handleStart(file);
};
const onSuccess = (file) => {
  if (file.status === "ready") {
    // 创建 FormData 对象
    let formData = new FormData();
    // 添加文件到 FormData 对象
    formData.append("id", "WU_FILE_0");
    formData.append("file", file.raw);
    formData.append("name", file.name);
    formData.append("type", "application/octet-stream");
    formData.append("lastModifiedDate", new Date());
    formData.append("size", file.size);
    req_uploadLicenseFile(formData).then((res) => {
      switch (res.data) {
        case 0:
          ElMessage.success("导入成功");
          setUpgradeInfo();
          break;
        case 5:
          uploadTip.value = "导入失败，请检查license文件";
          break;
        case 3:
          uploadTip.value = "license文件验证失败";
          break;
        default:
          break;
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.upgrade {
  background-color: #fff;
  color: #555;
  padding: 20px 30px 20px 40px;
  border-radius: 3px;
  box-shadow: 0px 2px 4px 0px rgba(64, 32, 224, 0.06);
}
.qrcode-img {
  display: inline-block;
  width: 150px;
  height: 150px;
}
.sn {
  width: 225px;
}
</style>
